<template>
	<view class="container">
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item"
				:class="{current: tabCurrentIndex === index}" @click="tabClick(index)">
				<text  v-if="navList[index].num!==0">{{item.text}}</text>
				<text v-else>{{item.text}}</text>
				<uni-badge class="badge"  :text="navList[index].num" size="small"></uni-badge>
				<!-- <uni-badge class="badge" v-if="index!==0" :text="navList[index].num" size="small"></uni-badge> -->
			</view>
		</view>
		<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tabItem,tabIndex) in navList" :key="tabIndex">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="getMore">
					<!-- 空白页 -->
					<u-empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"/>

					<!-- 订单列表 -->

					<view v-for="(item,index) in tabItem.orderList" :key="index">
						<view v-if="item.orders.length>1 " class="order-item">
							<view class="bottom">
								<view class="header-txt">
									订单号:{{item.sn}}
									<!-- <image style="width: 115px; height: 24px;" src="http://xbfl.e3.gcycloud.cn/fdsimage/group1/M00/07/83/wKiAAmEt7VaAXzS3AAAma5Vy53s780.jpg">
									</image> -->
								</view>
								<view class="header-txt">
									<text>{{item.createTime}}</text>
								</view>
							</view>
							<view class="header-text">
								<text v-if="item.payModel != '1'">您订单中的商品属于不同协议或供应商，故拆分为以下订单分开配送</text>
								<text v-else>您订单中的商品属于不同供应商，故拆分为以下订单分别付款及发货</text>
							</view>
							<view v-for="(order,orderIndex) in item.orders" :key="orderIndex">
								<view class="i-top b-b ">
									<image class="img" mode="aspectFill" src="../../static/store.png"></image>
									<view class="time">
										<text>{{order.supplierName}}</text>
										<online-service v-if="supplierCustomerGroup[order.supplierId]" @service="toService(order,order.supplierId)"></online-service>
									</view>
								</view>
								<view class="goods-box-single" v-for="(goodsItem, goodsIndex) in order.items"
									:key="goodsIndex" @click="toDetail(order.sn)">
									<image class="goods-img" :src="goodsItem.thumbnail" mode="aspectFill"></image>
									<view class="right">
										<text class="title more-t ">{{goodsItem.productName}}</text>
										<view class="attr-box">
											<text class="attr"> x {{goodsItem.num}}</text>
										</view>
										<text class="price">{{goodsItem.price | money}}</text>
									</view>
								</view>
								<view class="action-box b-t" v-if="order.status === 'waitSupConfirm'">
									<view class="action-btn" @click="openPopup(order,'cancel')">取消订单</view>
									<view class="action-btn recom" @click="addToCart(order)">再来一单</view>
								</view>
								<view class="action-box b-t" v-else-if="order.status === 'unShipped'">
									<view class="action-btn" @click="openPopup(order,'cancel')">取消订单</view>
									<view class="action-btn recom" @click="addToCart(order)">再来一单</view>
								</view>
								<view class="action-box b-t"
									v-else-if="order.status === 'shipped'||order.status==='partialShipment'">
									<view class="action-btn" @click="beforeConfirm(order)">确认收货</view>
									<view class="action-btn recom" @click="addToCart(order)">再来一单</view>
								</view>
								<view class="action-box b-t" v-else-if="order.status === 'completed'">
									<view class="action-btn" @click="addToCart(order)">再来一单</view>
									<!-- <view class="action-btn" @click="clickAftersale(item,2)">申请售后</view> -->
									<view class="action-btn recom" @click="toEvaluate(order)">评价</view>
								</view>
								<view class="action-box b-t"
									v-else-if="order.status === 'cancelled'||order.status==='commitFail'||order.status==='auditReject'||order.status==='refuse'">
									<view class="action-btn recom" @click="addToCart(order)">再来一单</view>
								</view>
								<view class="action-box b-t" v-else-if="order.status==='waitPay'">
									<view class="action-btn recom" @click="selectSupPay(order.supplierId,order.sn)"
										v-if="item.payModel == '1'">去支付</view>
									<view class="action-btn" @click="openPopup(order,'cancel')">取消订单</view>
								</view>
							</view>
							<view class="bottom">
								<!-- <view class="time-text">{{item.createTime}}</view> -->
								<view></view>
								<text class="price-box">
									<text>支付总额</text>
									<text class="price"
										v-if="detailOrderTotal[item.sn+'Integral'] || detailOrderTotal[item.sn+'Amount']">
										{{detailOrderTotal[item.sn+'Integral'] == 0 ? '' : detailOrderTotal[item.sn+'Integral']| orderProportion}}{{detailOrderTotal[item.sn+'Integral'] == 0 ? '' : '积分1'}}{{(detailOrderTotal[item.sn+'Integral'] == 0 || detailOrderTotal[item.sn+'Amount'] == 0) ? '' : '+'}}{{detailOrderTotal[item.sn+'Amount'] == 0 ? '' : '￥'}}{{(detailOrderTotal[item.sn+'Amount'] == 0 ? '' : detailOrderTotal[item.sn+'Amount']) | orderProportion}}
									</text>
									<text class="price" v-else>
										￥0
									</text>
								</text>
							</view>
							<!-- 支付选项-->
							<view class="action-box" v-if="goPay[item.sn] && item.payModel != '1'">
								<view class="action-btn recom" @click="selectUnifiedPay(goPay[item.sn])">去支付</view>
							</view>
						</view>
						<!-- <view v-if="item.orders.length>1" class="order-list">
							<text>下单时间：{{item.createTime}}</text>
							<text>订单总额：{{item.total}}</text>
							<text>您订单中的商品属于不同于协议或供应商，故拆分为以下订单分开配送：</text>
							&& tabItem.status !== 'grouping'
						</view> -->
						<template v-if="item.orders.length <= 1 && !item.groupInfo">
							<view v-for="(order,orderIndex) in item.orders" :key="orderIndex" class="order-item">
								<view @click="toDetail(order.sn)">
									<view class="i-top b-b">

											<image class="img" mode="aspectFill" src="../../static/store.png"></image>
											<view class="time">
												<text>{{order.supplierName}}</text>
												<online-service v-if="supplierCustomerGroup[order.supplierId]" @service="toService(order,order.supplierId)"></online-service>
											</view>
										
										<view class="i-top-right" style="color: #fa436a;">
											{{tabCurrentIndex == 0 ? '待发货' : '待收货'}}
										</view>
									</view>
									<template v-if="order.items.length <=2">
										<view class="goods-box-single" v-for="(goodsItem, goodsIndex) in order.items"
											:key="goodsIndex">
											<image class="goods-img" :src="goodsItem.thumbnail" mode="aspectFill"></image>
											<view class="right">
												<text class="title more-t">{{goodsItem.productName}}</text>
												<view class="attr-box">
													<text class="attr"> x {{goodsItem.num}}</text>
												</view>
												<text class="price">￥{{goodsItem.price|money}}</text>
											</view>
										</view>
									</template>
									<template v-else>
										<view class="goods-box-single" v-for="(goodsItem, goodsIndex) in order.items.slice(0,2)"
											:key="goodsIndex">
											<image class="goods-img" :src="goodsItem.thumbnail" mode="aspectFill"></image>
											<view class="right">
												<text class="title more-t">{{goodsItem.productName}}</text>
												<view class="attr-box">
													<text class="attr"> x {{goodsItem.num}}</text>
												</view>
												<text class="price"
													v-if="integralRule.priceShowWay===2">￥{{goodsItem.price}}</text>
												<text class="price" v-else>{{goodsItem.price | integralProportion}}
													积分</text>
										
											</view>
										</view>
										
										<template v-if="isFold">
											<view class="goods-box-single"  v-for="(goodsItem, goodsIndex) in order.items.slice(2,order.items.length)"
												:key="goodsIndex">
												<image class="goods-img" :src="goodsItem.thumbnail" mode="aspectFill"></image>
												<view class="right">
													<text class="title more-t">{{goodsItem.productName}}</text>
													<view class="attr-box">
														<text class="attr"> x {{goodsItem.num}}</text>
													</view>
													<text class="price"
														v-if="integralRule.priceShowWay===2">￥{{goodsItem.price}}</text>
													<text class="price" v-else>{{goodsItem.price | integralProportion}}
														积分</text>
											
												</view>
											</view>
										</template>
										<view class="fold" @click.stop="isFold = !isFold">
											{{isFold ? '收起' : '展开'}}
										</view>
									</template>

								</view>


								<view v-if="order.firstLogisticsTrack != ''">
									<view v-for="(logist,num) in order.orderLogisticsLatestList" :key="num">
										<view class="express-box" @click="showExpress(order,num)">
											<text>{{logist.operateTime.slice(5,10)}} </text>
											【包裹{{num+1}}】{{logist.content}}
										</view>
									</view>

								</view>

								<view v-else>
									<view class="action-box b-t">
										暂无物流信息
									</view>
								</view>
							</view>
							<!-- </view> -->
						</template>
					</view>
					<uni-load-more :status="tabItem.loadingType"></uni-load-more>

				</scroll-view>
			</swiper-item>
		</swiper>
		<u-popup v-model="visible" mode="center" width="90%" :mask-close-able="true" :mask="true" zIndex="1000" border-radius="10" :closeable="true" @close="onCongClose">
				<view class="content-top">
					<view class="goods-box-single">
						<image class="goods-img"
							:src="curOrder&&curOrder.items[0].orderItem.thumbnail"
							mode="aspectFill">
						</image>
						<view class="goods-num">
							{{sumNum}}件
						</view>
						<view class="right">
							<text class="titleStatus more-t">{{curOrder&&curOrder.status == 'unShipped' ? '待发货' : '待收货'}}</text>
							<text class="title more-t">物流公司：{{logisticInfo.name}}</text>
							<view class="title more-t">物流单号：{{logisticInfo.sn}}<text class="copy" @click="copySn(logisticInfo.sn)">复制</text></view>


						</view>


					</view>
				</view>
				<view class="content-express">
					<lee-logistics height="300px" :logisticInfo="logisticInfo.trackList" />
				</view>
				<view class="content-btn" @click="toDetail(curOrder.sn)">
					点击查看订单详情 >
				</view>
		</u-popup>
		<online-service v-if="isShowCustomerService" is-platform></online-service>
	</view>
</template>

<script>
	import OnlineService from '../../components/online-service/online-service.vue'
	import {listCustomerGroupBySupplierId,countByStatus,countByShippedStatus} from '@/api/user/user.js'
	import { onlineService } from '../../api/index';
	import uniBadge from '../../components/uni-badge/uni-badge.vue'
	import {
		ordersOrderMasterList
	} from '../../api/express/express.js'
	import LeeLogistics from '@/components/lee-logistics/lee-logistics.vue'
	import {h5Copy} from '../../common/utils/func.js'
	export default {
		components: {
			LeeLogistics,
			OnlineService,
			uniBadge
		},
		data() {
			return {
				visible:false,
				navList: [{
						status: 'unShipped',
						text: '待发货',
						loadingType: 'more',
						orderList: [],
						page: 1,
						num: 0
					},
					{
						status: 'shipped',
						text: '待收货',
						loadingType: 'more',
						orderList: [],
						page: 1,
						num: 0
					}
				],
				tabCurrentIndex: 0,
				detailOrderTotal: {},
				limit: 10,
				keyword: '',
				integralRule: uni.getStorageSync('integralRule'),
				imgList: [{
					url: 'https://ygcgtest.szexgrp.com/fdsimage//group1/M00/00/02/rBYBBmO_rgqAMM4SAADFkcEAGag977.jpg',
					id: 1
				}, {
					url: 'https://ygcgtest.szexgrp.com/fdsimage//group1/M00/00/02/rBYBBmO_rgqAMM4SAADFkcEAGag977.jpg',
					id: 2
				}, {
					url: 'https://ygcgtest.szexgrp.com/fdsimage//group1/M00/00/02/rBYBBmO_rgqAMM4SAADFkcEAGag977.jpg',
					id: 3
				}, {
					url: 'https://ygcgtest.szexgrp.com/fdsimage//group1/M00/00/02/rBYBBmO_rgqAMM4SAADFkcEAGag977.jpg',
					id: 4
				}, ],
				logisticInfo: {},
				curOrder: undefined,
				sumNum:0,
				// 供应商在线客服map
				supplierCustomerGroup:{},
				// 是否显示平台客服
				isShowCustomerService:0,
				isFold:false
			};
		},
		onLoad(options) {
			// 初始化是否显示客服
			this.isShowCustomerService = uni.getStorageSync('isShowCustomerService')
			  ? Number(uni.getStorageSync('isShowCustomerService')) : 1
			this.loadData()
			this.loadInit()
		},
		onNavigationBarButtonTap(val) {
			this.loadData()
		},
		onNavigationBarSearchInputChanged(val) {
			console.log(val)
			this.keyword = val.text

		},
		onNavigationBarSearchInputConfirmed(val) {
			this.keyword = val.text;
			this.loadData()
		},
		onPullDownRefresh() {
			console.log('---')
			this.loadData()
		},
		methods: {
			loadInit() {
				// 待发货
				countByStatus({status:'unShipped'}).then(res => {
					if(res.code == 0) {
						this.$set(this.navList[0],'num',+res.data)
					}
				})
				// 待收货
				countByShippedStatus({status:'shipped'}).then(res => {
					if(res.code == 0) {
						this.$set(this.navList[1],'num',+res.data)
					}
				})
			},
			toService(order,supplierId){
				let content = `订单编号:${order.sn}\n供应商订单号:${order.thirdSn}\n订单总额:${order.total}\n订单内商品:`+order.items.map(item =>item.productName).join('、')
				onlineService({ "type": "order", "content": content,"vendorId": this.supplierCustomerGroup[supplierId]}).then(res=>{
					if(res.code === 0){
						window.location.href=res.data
					}
				})
			},
			getSupplierCustomerGroup(ids){
				ids = [...new Set(ids)]
				ids.forEach(id => {
					listCustomerGroupBySupplierId({}, 'supplierIds[]=' + id).then(res => {
						if (res.code === 0) {
							this.supplierCustomerGroup = {
								...this.supplierCustomerGroup,
								...res.data
							}
						}
					})
				})
			},
			copySn(sn) {
			    //#ifdef MP
				uni.setClipboardData({
					data: sn,
					success: () => {
						uni.showToast({
							icon: "success",
							title: '复制成功'
						})
					}
				})
			    // #endif
			    // #ifdef H5
			    if(h5Copy(sn)){
			        uni.showToast({
			            icon: "success",
			            title: '复制成功'
			        })
			    }
			    // #endif
			
			},
			selectedBanner(item, index) {
				console.log('🥒', item, index)
			},
			showExpress(order, num) {
				console.log(order)
				this.curOrder = {...order,items:order.orderLogistics[num].detailList}
				this.sumNum = 0
				for(let i = 0; i < this.curOrder.items.length;i++) {
					this.sumNum += +this.curOrder.items[i].num
				}
				this.logisticInfo = {
					trackList : order.orderLogistics[num].trackList,
					name:  order.orderLogistics[num].name,
					sn:order.orderLogistics[num].sn
				}
				
				this.visible = true
			},
			onCongClose() {
				this.visible=false
			},
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
			},
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
				this.loadData('tabChange');
			},
			getMore() {
				//这里是将订单挂载到tab列表下
				let index = this.tabCurrentIndex;
				let navItem = this.navList[index];
				this.detailOrderTotal = {}
				if (navItem.loadingType === 'loading') {
					//防止重复加载
					return;
				}

				navItem.loadingType = 'loading';

				let total = 0;
				let orderList;
				const param = {
					page:  navItem.page,
					limit: this.limit,
					status: navItem.status,
					keyword: this.keyword,
					ifGetOutgoing: "1", //是否获取物流信息
				}
				ordersOrderMasterList(param).then(res => {
					if (res.code == 0) {
						const supplierIds = []
						res.data.records.forEach(master=>{
							supplierIds.push(...master.orders.map(i=>i.supplierId))
						})
						orderList = res.data.records;
						orderList.forEach(master => {
							navItem.orderList.push(master);
							master.orders.forEach(sub => {
								if (master.orders.length > 1) {
									if (sub.status == 'waitPay') {
										this.$set(this.goPay, master.sn, sub.masterId)
									}
									//如果是多单合并的情况就分别累加支付积分和现金，显示在主订单的支付总额处
									if (this.detailOrderTotal[master.sn + 'Amount']) {
										this.$set(this.detailOrderTotal, master.sn + 'Amount', this
											.detailOrderTotal[master.sn + 'Amount'] + sub
											.amount)
									} else {
										this.$set(this.detailOrderTotal, master.sn + 'Amount', sub
											.amount)
									}
									if (this.detailOrderTotal[master.sn + 'Integral']) {
										this.$set(this.detailOrderTotal, master.sn + 'Integral',
											this.detailOrderTotal[master.sn + 'Integral'] + sub
											.payIntegral)
									} else {
										this.$set(this.detailOrderTotal, master.sn + 'Integral',
											sub.payIntegral)
									}
								} else if (master.orders.length == 1) {
									// if (sub.status == 'waitPay'){
									// 	this.$set(this.goPay,sub.sn,sub.masterId)
									// }
									this.$set(this.detailOrderTotal, sub.sn + 'Amount', sub.amount)
									this.$set(this.detailOrderTotal, sub.sn + 'Integral', sub
										.payIntegral)
								}
							})
						})
						
						this.$set(navItem, 'loaded', true);
						this.getSupplierCustomerGroup(supplierIds)
						total = parseInt(res.data.total)
						//判断是否还有数据， 有改为 more， 没有改为noMore
						if (navItem.orderList.length === total) {
							navItem.loadingType = 'noMore'
						} else {
							navItem.loadingType = 'more';
						}
						navItem.page = 2;
						navItem.page++;
						console.log(this.navList)
					} else {
						this.toast(res.message)
						navItem.loadingType = 'more';
					}
				})
			},
			toDetail(id) {
				uni.navigateTo({
					url: '/pages/order/detail?id=' + id
				})
			},

			loadData() {
				//这里是将订单挂载到tab列表下
				let index = this.tabCurrentIndex;
				let navItem = this.navList[index];
				this.detailOrderTotal = {}
				if (navItem.loadingType === 'loading') {
					//防止重复加载
					return;
				}

				navItem.loadingType = 'loading';

				let total = 0;
				let orderList;
				const param = {
					page: 1,
					limit: this.limit,
					status: navItem.status,
					keyword: this.keyword,
					ifGetOutgoing: "1", //是否获取物流信息
				}
				ordersOrderMasterList(param).then(res => {
					if (res.code == 0) {
						const supplierIds = []
						res.data.records.forEach(master=>{
							supplierIds.push(...master.orders.map(i=>i.supplierId))
						})
						navItem.orderList = res.data.records
						this.$set(navItem, 'loaded', true);
						total = parseInt(res.data.total)
						//判断是否还有数据， 有改为 more， 没有改为noMore
						if (navItem.orderList.length === total) {
							navItem.loadingType = 'noMore'
						} else {
							navItem.loadingType = 'more';
						}
						navItem.page = 2;
						this.getSupplierCustomerGroup(supplierIds)
					} else {
						this.toast(res.message)
						navItem.loadingType = 'more';
					}
				})
			}
		}




	}
</script>

<style lang="scss">
	page,
	.content {
		background: $page-color-base;
		height: 100%;
	}

	.container {
		background: #f5f5f5;
		height: 100%;
	}

	.swiper-box {
		height: calc(100% - 40px);
	}
	.copy{
					color: royalblue;
					border-radius: 20rpx;
					margin-left: 20rpx;
					min-width: 80rpx;
					text-align: center;
					width: fit-content;
				}
	.list-scroll-content {
		height: 100%;
	}

	.content-express {
		padding: 0 20upx;
	}
	.content-btn {
		padding: 20upx;
		text-align: center;
	}
	// .time-text {
	// 	font-size: 14px;
	// 	float: left;
	// 	position: absolute;
	// 	left: 5px;
	// }

	.nav {
		left: 0;
		top: 0;
		background-color: #fff;
		width: 100%;
		position: fixed;
		height: calc(44px + env(safe-area-inset-top));
		padding: 7px 3px;
		padding-top: calc(7px + env(safe-area-inset-top));
		display: flex;
		align-items: center;
		z-index: 99;

		.back {
			width: 20px;
			height: 20px;
		}

		.title {
			margin: auto;
			font-size: 16px;
			font-weight: 700;
			line-height: 30px;
		}

		.submit {
			font-size: 15px;
			color: #FA436A;
			margin-right: 6rpx;
		}
	}

	.navbar {
		display: flex;
		height: 80rpx;
		// padding: 0 10rpx;
		padding-left: 10rpx;
		background: #fff;

		box-shadow: 0 1px 5px rgba(0, 0, 0, .06);
		z-index: 10;
		min-width: 100%;
		width: auto;
		overflow-x: scroll;
		white-space: nowrap;

		.nav-item {
			flex: 1;
			width: auto;
			margin-right: 10rpx;
			line-height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: $my-font-size-base;
			color: $font-color-dark;
			position: relative;

			text {
				width: 100%;
				text-align: center;
			}

			&.current {
				color: $base-color;

				// &:after {
				// 	content: '';
				// 	position: absolute;
				// 	left: 50%;
				// 	// left: 0;
				// 	bottom: 0;
				// 	transform: translateX(-50%);
				// 	// width: 44px;
				// 	width: 100%;
				// 	height: 0;
				// 	border-bottom: 2px solid $base-color;
				// }
			}

			/deep/.uni-badge {
				line-height: normal;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.badge {
				position: absolute;
				top: 0upx;
				right: 104upx;
				color: #fff;
				z-index: 998;
				background-color: $base-color;
				/* #ifdef MP */
				border-radius: 100px;
				/* #endif */
			
				text {
					/* #ifdef MP */
					color: #fff;
					background-color: $base-color;
					/* #endif */
				}
			}
		}
	}

	.uni-tip {
		overflow: hidden;

		.log-content {
			.tabs {
				display: flex;
				// height: 30px;
				width: 100%;

				.tab-item {
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;
					height: 100%;
					font-size: 13px;
					color: $font-color-dark;
					position: relative;
					padding-bottom: 10rpx;

					&.current {
						color: $base-color;

						&:after {
							content: '';
							position: absolute;
							left: 50%;
							bottom: 0;
							transform: translateX(-50%);
							width: 34px;
							height: 0;
							border-bottom: 2px solid $base-color;
						}
					}
				}
			}

			.swiper-area {
				width: 100%;
				font-size: 13px;

				.s-item {
					background-color: #fff;
					width: 100%;
					padding: 16rpx 30rpx;
					display: flex;
					flex-direction: column;

					.btn {
						float: right;
						width: 160upx;
						height: 60upx;
						margin: 0 22rpx 20rpx 0;
						padding: 0;
						text-align: center;
						line-height: 60upx;
						font-size: $font-sm + 2upx;
						background: #fff9f9;
						color: $base-color;
						border-radius: 10px;
						border: 0.5px solid $base-color;
					}

					.c-line {
						padding: 10rpx 0;
					}

					.p-line {
						padding: 10rpx 0;
						display: flex;
						justify-content: flex-start;
						// align-items: center;

						.left-side {
							font-size: 13px;
						}

						.right-side {
							flex: 1;
							display: flex;
							flex-direction: column;

							.right-item {
								padding-bottom: 10rpx;
							}
						}

						.track-list {
							padding: 10rpx 0;

							.track-item {
								.time {}

								.day {}

								.content {}
							}
						}
					}
				}
			}
		}

		.popup-content {
			.order-info {
				color: #303133;
				margin-bottom: 16rpx;
			}

			.cancel-reason {
				height: 140rpx;
				min-height: 140rpx;
				width: 100%;
				max-height: 200rpx;
				padding: 16rpx;
				color: #303133;
				font-size: 14px;
				border: 1px solid #d9d9d9;
			}

			.ph {
				font-size: 14px;
				color: #666;
			}
		}

		.uni-tip-group-button {
			border-top: none;
			margin-top: 20rpx;

			.uni-tip-button {
				border-top: 1px solid #e2e2e2;
				line-height: normal;
				display: flex;
				align-items: center;
				justify-content: center;

				&.confirm {
					border-top: 1rpx solid $base-color;
					border-bottom: 1rpx solid $base-color;
					color: #fff;
					background-color: $base-color;
				}
			}
		}
	}

	.uni-swiper-item {
		height: auto;
	}

	.order-list {
		margin: 10rpx;
		border: 1px solid #999;
		border-radius: 10rpx;
		background-color: #fff;

		text {
			font-size: 14px;
			color: $font-color-base;
		}
	}

	.content-top {
		display: flex;
		flex-direction: column;
		padding-left: 20upx;
		background: #fff;
		// margin: 0 30rpx 16rpx 30rpx;
		border-radius: 20rpx;
		background-color: #f2f2f2;




		/* 单条商品 */
		.goods-box-single {
			display: flex;
			padding: 20upx 0;
			align-items: center;
			position: relative;

			.goods-num {
				position: absolute;
				top: 102upx;
				color: #fff;
				left: 54upx;
				background-color: #646464;
				padding: 4upx 14upx;
				opacity: 0.8;
				border-radius: 30upx;
			}

			.goods-img {
				display: block;
				width: 120upx;
				height: 120upx;
				background-color: #fff;
				background: url(../../static/error-img-60.png);
			}

			.right {
				flex: 1;
				display: flex;
				flex-direction: column;
				padding: 0 20upx;
				overflow: hidden;

				.titleStatus {
					color: #ec8d98;
					font-size: 34upx;
				}

				.title {
					font-size: $font-base;
					color: $font-color-dark;
					// line-height: 42rpx;
				}

				.attr-box {
					font-size: $font-sm + 2upx;
					color: $font-color-light;
					padding: 10upx;
					padding-right: 0;

					.attr {
						float: left;
						width: fit-content;
					}

					.action {
						float: right;
						width: fit-content;
						height: fit-content;
						padding: 4rpx 16rpx;
						text-align: center;
						font-size: $my-font-size-sm;
						color: $font-color-dark;
						background: #fff;
						border-radius: 20px;
						border: 0.5px solid #C0C4CC;
					}
				}

				.price {
					font-size: $font-base + 2upx;
					color: $font-color-dark;

					&:before {
						// content: '￥';
						font-size: $font-sm;
						margin: 0 2upx 0 8upx;
					}
				}
			}
		}





	}

	.order-item {
		display: flex;
		flex-direction: column;
		padding-left: 20upx;
		background: #fff;
		margin-top: 16rpx;
		// margin: 0 30rpx 16rpx 30rpx;
		border-radius: 20rpx;

		.item-header {
			display: flex;
			justify-content: space-between;
			padding-top: 30rpx;

			.item-header-shop {
				color: #323232;
				font-size: 30rpx;
			}

			.item-header-tag {
				color: #FF2C5E;
				font-size: 24rpx;
				padding-right: 24rpx;
			}
		}

		.item-content {
			display: flex;
			flex-direction: row;
			width: 95%;

			margin-top: 14rpx;

			.image {
				width: 200rpx;
				height: 200rpx;
				margin-bottom: 6rpx;
				position: relative;
				margin-right: 20rpx;

				.goods-image {
					width: 100%;
					height: 100%;
					margin: auto;
				}

				.tuan {
					background: url(../../static/tuan.png) no-repeat center;
					object-fit: cover;
					width: 90rpx;
					height: 34rpx;
					position: absolute;
					left: 0;
					top: 0;
					font-size: 22rpx;
					text-align: center;
					line-height: 34rpx;
				}

			}

			.detail {
				width: calc(100% - 220rpx);
			}

			.s-item-title {
				// height: 40px;
				color: $font-color-dark;
				font-size: 14px;
				white-space: normal;
				text-align: left;
			}

			.slider-content {
				.group-btn {
					width: 100%;
					text-align: right;
					margin-top: 38rpx;
					margin-bottom: 28rpx;

					.btn {
						display: inline-block;
						width: 160rpx;
						height: 48rpx;
						border-radius: 24rpx;
						// border: 1px solid #C7C7C7;
						text-align: center;
						line-height: 48rpx;
						color: #646464;
					}
				}

				.left {
					margin-top: 22rpx;
					width: 100%;
					position: relative;

					.ping {
						display: inline-block;
						color: #909090;
						font-size: 24rpx;
						vertical-align: middle;
						margin-left: 10rpx;

						&.tR {
							position: absolute;
							right: 0;
							top: 5rpx;
							vertical-align: middle;
						}
					}

					.progressBar-wrap {
						width: 200rpx;
						height: 12rpx;
						background-color: #F0F0F0;
						border-radius: 6rpx;
						display: inline-block;
						vertical-align: middle;

						.progressBar {
							background: linear-gradient(90deg, #FF4D4F 0%, #FFC53D 100%);
							border-radius: 6rpx;
							height: 12rpx;
							position: relative;

							.circle {
								width: 16rpx;
								height: 16rpx;
								background: #FFFFFF;
								border-radius: 50%;
								border: 3rpx solid #FFC53D;
								position: absolute;
								right: 0;
								top: -2rpx;
							}
						}
					}

					.integral {
						color: $uni-color-primary;
						font-size: 15px;
						// margin: 4rpx 4rpx 0 4rpx;
						margin-right: 10rpx;

						&:before {
							background: url(../../static/money.png) no-repeat;
							width: 24rpx;
							height: 24rpx;
							// margin-left: 30rpx;
							display: inline-block;
							content: '';
							background-size: contain;
						}

						// &:after {
						// 	margin-left: 4rpx;
						// 	content: '积分';
						// 	color: #909090;
						// 	font-size: 10px;
						// }
					}

					.price-btn {
						width: 94rpx;
						height: 40rpx;
						background: linear-gradient(135deg, #F73B6D 0%, #F6160F 100%);
						box-shadow: 0px 10rpx 10rpx 0rpx rgba(247, 46, 76, 0.2);
						border-radius: 20rpx;
						font-size: 22rpx;
						color: #fff;
						line-height: 40rpx;
						text-align: center;
					}

					.price {
						padding-left: 35rpx;
						text-align: left;
						display: block;
						font-size: 13px;
						color: #646464;
					}
				}

				.true_price {
					width: 100%;
					margin-top: 25rpx;
					text-align: right;

					.price_1 {
						color: #323232;
						font-size: 28rpx;
						vertical-align: middle;
					}

					.price_2 {
						color: #323232;
						font-size: 34rpx;
						vertical-align: middle;
						margin-right: 10rpx;
					}

					.price_3 {
						color: #909090;
						font-size: 22rpx;
						vertical-align: middle;
					}
				}
			}
		}

		.i-top {
			display: flex;
			align-items: center;
			height: 80upx;
			padding-right: 20rpx;
			font-size: $font-base;
			color: $font-color-dark;
			position: relative;

			.img {
				width: 32upx;
				height: 32upx;
				margin-right: 6upx;
			}

			.time {
				flex: 1;
				width: 0;
				margin-right: 10rpx;
				display: flex;
				align-items: center;
				text{
					max-width: calc(100% - 54rpx);
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-right: 10rpx;
				}
			}

			.state {
				color: $base-color;
			}

			.del-btn {
				padding: 10upx 0 10upx 36upx;
				font-size: $font-lg;
				color: $font-color-light;
				position: relative;

				&:after {
					content: '';
					width: 0;
					height: 30upx;
					border-left: 1px solid $border-color-dark;
					position: absolute;
					left: 20upx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}

		/* 多条商品 */
		.goods-box {
			height: 160upx;
			padding: 20upx 0;
			white-space: nowrap;

			.goods-item {
				width: 120upx;
				height: 120upx;
				display: inline-block;
				margin-right: 24upx;
			}

			.goods-img {
				display: block;
				width: 100%;
				height: 100%;
			}
		}

		/* 单条商品 */
		.goods-box-single {
			display: flex;
			padding: 20upx 0;
			align-items: center;

			.goods-img {
				display: block;
				width: 120upx;
				height: 120upx;
				background-color: #fff;
				background: url(../../static/error-img-60.png);
			}

			.right {
				flex: 1;
				display: flex;
				flex-direction: column;
				padding: 0 20upx;
				overflow: hidden;

				.title {
					font-size: $font-base;
					color: $font-color-dark;
					// line-height: 42rpx;
				}

				.attr-box {
					font-size: $font-sm + 2upx;
					color: $font-color-light;
					padding: 10upx;
					padding-right: 0;

					.attr {
						float: left;
						width: fit-content;
					}

					.action {
						float: right;
						width: fit-content;
						height: fit-content;
						padding: 4rpx 16rpx;
						text-align: center;
						font-size: $my-font-size-sm;
						color: $font-color-dark;
						background: #fff;
						border-radius: 20px;
						border: 0.5px solid #C0C4CC;
					}
				}

				.price {
					font-size: $font-base + 2upx;
					color: $font-color-dark;

					&:before {
						// content: '￥';
						font-size: $font-sm;
						margin: 0 2upx 0 8upx;
					}
				}
			}
		}

		.bottom {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20upx 20upx 20upx 0;

			.header-txt {
				font-size: $my-font-size-middle;
				word-break: break-all;
			}

			.time-text {
				flex: 1;
				font-size: $my-font-size-middle;
			}

			.price-box {
				// display: flex;
				// justify-content: flex-end;
				// align-items: baseline;
				// padding: 20upx 30upx;
				font-size: $font-sm;
				text-align: right;
				// word-break: break-all;
				color: $font-color-light;

				.num {
					margin: 0 8upx;
					color: $font-color-dark;
				}

				.price {
					font-size: $my-font-size-base;
					color: $base-color;
					margin-left: 8rpx;

					// &:before {
					// 	content: '￥';
					// 	font-size: $font-sm;
					// 	margin: 0 2upx 0 8upx;
					// }
					&:after {
						color: $base-color;
						font-size: $my-font-size-lg;
						margin-left: 8rpx;
					}
				}
			}
		}

		// .price-box {
		// 	display: flex;
		// 	justify-content: flex-end;
		// 	align-items: baseline;
		// 	// padding: 20upx 30upx;
		// 	font-size: $font-sm + 2upx;
		// 	color: $font-color-light;

		// 	.num {
		// 		margin: 0 8upx;
		// 		color: $font-color-dark;
		// 	}

		// 	.price {
		// 		font-size: $font-lg;
		// 		color: $font-color-dark;

		// 		// &:before {
		// 		// 	content: '￥';
		// 		// 	font-size: $font-sm;
		// 		// 	margin: 0 2upx 0 8upx;
		// 		// }
		// 	}
		// }
		.express-box {
			font-size: 30rpx;
			background-color: #f2f2f2;
			font-size: $font-base;
			padding: 0 20upx;

			text {
				margin-right: 10upx;
			}

			background-color: #f2f2f2;
			width: 95%;
			height: 80upx;
			margin-bottom: 12px;
			border-radius: 10px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			line-height: 80upx;
		}

		.action-box {
			position: relative;
			padding-right: 20upx;
			line-height: 100upx;
			font-size: $font-base;
			text-align: center;
			height: 100upx;

		}

		.action-btn {
			width: fit-content;
			min-width: 160upx;
			height: 60upx;
			margin: 0;
			margin-top: 1upx;
			margin-left: 24upx;
			padding: 0 15upx;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			// line-height: 60upx;
			font-size: $font-sm + 2upx;
			color: $font-color-dark;
			background: #fff;
			border-radius: 20px;
			border: 1rpx solid #C0C4CC;

			&:after {
				border-radius: 100px;
			}

			&.recom {
				background: #fff9f9;
				color: $base-color;
				border: 1rpx solid $base-color;

				&:after {
					border: 1rpx solid $base-color;
				}
			}
		}
	}


	/* load-more */
	.uni-load-more {
		display: flex;
		flex-direction: row;
		height: 80upx;
		align-items: center;
		justify-content: center
	}

	.uni-load-more__text {
		font-size: 28upx;
		color: #999
	}

	.uni-load-more__img {
		height: 24px;
		width: 24px;
		margin-right: 10px
	}

	.uni-load-more__img>view {
		position: absolute
	}

	.uni-load-more__img>view view {
		width: 6px;
		height: 2px;
		border-top-left-radius: 1px;
		border-bottom-left-radius: 1px;
		background: #999;
		position: absolute;
		opacity: .2;
		transform-origin: 50%;
		animation: load 1.56s ease infinite
	}

	.uni-load-more__img>view view:nth-child(1) {
		transform: rotate(90deg);
		top: 2px;
		left: 9px
	}

	.uni-load-more__img>view view:nth-child(2) {
		transform: rotate(180deg);
		top: 11px;
		right: 0
	}

	.uni-load-more__img>view view:nth-child(3) {
		transform: rotate(270deg);
		bottom: 2px;
		left: 9px
	}

	.uni-load-more__img>view view:nth-child(4) {
		top: 11px;
		left: 0
	}

	.load1,
	.load2,
	.load3 {
		height: 24px;
		width: 24px
	}

	.load2 {
		transform: rotate(30deg)
	}

	.load3 {
		transform: rotate(60deg)
	}

	.load1 view:nth-child(1) {
		animation-delay: 0s
	}

	.load2 view:nth-child(1) {
		animation-delay: .13s
	}

	.load3 view:nth-child(1) {
		animation-delay: .26s
	}

	.load1 view:nth-child(2) {
		animation-delay: .39s
	}

	.load2 view:nth-child(2) {
		animation-delay: .52s
	}

	.load3 view:nth-child(2) {
		animation-delay: .65s
	}

	.load1 view:nth-child(3) {
		animation-delay: .78s
	}

	.load2 view:nth-child(3) {
		animation-delay: .91s
	}

	.load3 view:nth-child(3) {
		animation-delay: 1.04s
	}

	.load1 view:nth-child(4) {
		animation-delay: 1.17s
	}

	.load2 view:nth-child(4) {
		animation-delay: 1.3s
	}

	.load3 view:nth-child(4) {
		animation-delay: 1.43s
	}

	@-webkit-keyframes load {
		0% {
			opacity: 1
		}

		100% {
			opacity: .2
		}
	}

	.mask {
		display: flex;
		align-items: flex-end;
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0);
		z-index: 9995;
		transition: .3s;

		.mask-content {
			border-radius: 10px 10px 0 0;
			width: 100%;
			min-height: 35vh;
			max-height: 70vh;
			padding: 30upx;
			background: #fff;
			transform: translateY(100%);
			transition: .3s;
			overflow-y: scroll;
		}

		.header {
			margin-bottom: 30upx;
			height: 60rpx;

			.title {
				color: #000;
				display: inline-block;
				font-weight: bold;
				font-size: 17px;
			}

			.close {
				display: inline-block;
				float: right;
				width: 50rpx;
				height: 50rpx;
				margin-top: 12rpx;
			}
		}

		.integral-area {
			white-space: nowrap;
			// flex-flow: row wrap;
			// align-items: flex-start;
			// justify-content: flex-start;
			// justify-content: space-between;
			// width: 100%;
			margin-top: 30rpx;

			.scroll-wrapper {
				display: flex;
				flex-direction: row;

				.integral-item {
					// width: 30%;
					// height: 30%;
					min-width: 100px;
					min-height: 100rpx;
					color: #000;
					padding: 16rpx;
					text-align: center;
					background-color: #f3f3f3;
					border-radius: 6px;
					margin-right: 30rpx;
					margin-bottom: 20rpx;
					font-size: 12px;

					.name {
						display: block;
						font-size: 12px;
					}

					.balance {
						margin-top: 8rpx;
						display: block;
						font-size: 10px;
					}

					&.active {
						background-color: #fff1ef;
						border: 1px solid $base-color;
						color: $base-color;
					}
				}
			}
		}

		&.none {
			display: none;
		}

		&.show {
			background: rgba(0, 0, 0, .4);

			.mask-content {
				transform: translateY(0);
			}
		}
	}

	.header-text {
		padding-right: 20rpx;
		font-size: $my-font-size-middle;
		word-break: break-all;
	}
	.fold {
		text-align: right;
		
		padding: 40rpx;
	}
</style>
